<template>
    <view class="pub_page pub_login pub_register">
        <pub-head headerName="register" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="cont_box">
                <div class="logo_txt">
                    <div class="p_1">欢迎加入众旺通</div>
                </div>
                <br>
                <div class="input_div">
                    <div class="li li_4">
                        <input class="input" v-model="nickName" type="text" placeholder="请输入昵称" maxlength="10">
                    </div>
                    <div class="li li_1">
                        <input class="input" v-model="mobile" type="number" placeholder="请输入手机号" maxlength="11">
                    </div>
                    <div class="li li_3">
                        <input class="input" v-model="code" type="number" placeholder="请输入验证码" maxlength="6">
                        <div class="input_right_btn" :class="code_msg == '请输入手机号' ? 'ainput_right_btn_no' : ''"
                            @click="toSendCode">{{ code_msg }}</div>
                    </div>
                    <div class="li li_2">
                        <input class="input" v-model="password" type="password" placeholder="请输入登录密码">
                    </div>
                    <div class="li li_2">
                        <input class="input" v-model="payPassword" type="password" placeholder="请输入二级密码" maxlength="6">
                    </div>
                    <div class="li li_5">
                        <input class="input" v-model="invitationCode" type="text" placeholder="请输入邀请码">
                    </div>
                </div>
            </div>
            <br>
            <br>
            <div class="pub_btn" @click="toRegister">立即注册</div>
            <div class="pub_btn_txt" v-if="$store.state.deviceType == 'h5'" @click="toDownload">已有账号？点击下载App
            </div>
            <br>
            <br>
        </div>
        <view class="pub_dialog pub_dialog_register" v-if="isWx">
            <div class="d_box">
                <div class="d_title pub_font">众旺通</div>
                <div class="d_content pub_font"><br>请点击右上角<br>使用外部浏览器打开当前链接</div>
            </div>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '',//标题栏内容
                left_type: 3,
                header_color: '',//标题栏背景色
            },
            pagescrollTop: 0,

            code: '',
            code_msg: '请输入手机号',
            mobile: '',
            nickName: '',
            password: '',
            payPassword: '',
            invitationCode: '',

            appDownloadURL: '',

            isWx: false,
        };
    },
    onLoad(option) {
        var ua = navigator?.userAgent?.toLowerCase() || '';
        if (ua.indexOf("micromessenger") != -1) {
            this.isWx = true;
            // return;
        }
        this.invitationCode = option.c;
        this.getAppDownloadURL();
        // #ifdef H5
        if (process.env.NODE_ENV == 'production') {
            this.headerConfig.left_type = 0;
        }
        // #endif
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    watch: {
        mobile() {
            if (this.code_msg.indexOf('剩') == -1) {
                if (this.mobile.length == 11 && this.$comFun.ValidateMobile(this.mobile)) {
                    this.code_msg = '发送验证码';
                } else {
                    this.code_msg = '请输入手机号';
                }
            }
        }
    },
    methods: {
        toDownload() {
            window.location.href = this.appDownloadURL;
        },
        async getAppDownloadURL() {
            // let configRes = await getApp().getConfigList();
            // // console.log(configRes);
            // this.appDownloadURL = configRes.androidUrl;

            const res = await this.$request.get('public/getAppVersion', {});
            if (res.code == 200) {
                this.appDownloadURL = res.result.android_url;
            }
        },
        async toRegister() {
            if (!this.nickName.trim()) {
                this.$comFun.toast('昵称不能为空');
                return;
            }
            let nickName = this.nickName.trim();
            let regex = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,10}$/; // 只包含英文字母的正则表达式
            console.log(regex.test(nickName)); // true
            if (!regex.test(nickName)) {
                this.$comFun.toast('昵称不能包含特殊字符');
                return;
            }
            if (!this.$comFun.ValidateMobile(this.mobile)) {
                this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (this.code.length != 6 || !this.$comFun.ValidateNum(this.code)) {
                this.$comFun.toast('请输入6位数字验证码');
                return;
            }
            if (this.password.length < 8 || !this.$comFun.ValidateNumAndLetter(this.password)) {
                this.$comFun.toast('请输入至少8位登录密码，必须包括数字和字母');
                return;
            }
            if (this.payPassword.length != 6 || !this.$comFun.ValidateNum(this.payPassword)) {
                this.$comFun.toast('请输入6位数字支付密码');
                return;
            }
            // if (!this.invitationCode) {
            //     this.$comFun.toast('请输入邀请码');
            //     return;
            // }
            this.$comFun.openLoading();
            const res = await this.$request.post('login/smsReg', {
                code: this.code,
                mobile: this.mobile,
                nickName: nickName,
                password: this.password,
                payPassword: this.payPassword,
                invitationCode: this.invitationCode,
            });
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.$comFun.toast('注册成功');
                // #ifdef H5
                setTimeout(() => {
                    window.location.href = this.appDownloadURL;
                }, 1000);
                // #endif

                // #ifdef APP-PLUS
                setTimeout(() => {
                    this.$comFun.closeWin();
                }, 1000);
                // #endif

            } else {
                this.$comFun.toast(res.message);
            }
        },
        async toSendCode() {
            if (this.mobile.length != 11) {
                // this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (this.code_msg == '发送验证码') {
                this.$comFun.openLoading();
                const res = await this.$request.post('public/sendSms', {
                    mobile: this.mobile
                });
                // console.log(res);
                this.$comFun.closeLoading();
                if (res.code == 200) {
                    this.codeTime();
                } else {
                    this.$comFun.toast(res.message);
                }
            }
        },
        codeTime() {
            this.code_msg = '剩 60 s';
            let count = 60;
            let time = setInterval(() => {
                if (count == 1) {
                    clearInterval(time);
                    if (this.$comFun.ValidateMobile(this.mobile)) {
                        this.code_msg = '发送验证码';
                    } else {
                        this.code_msg = '请输入手机号';
                    }
                    return;
                }
                count--;
                this.code_msg = '剩 ' + count + ' s';
            }, 1000);
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/login.scss";
</style>
